<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/header.css" />
    <link rel="stylesheet" href="font/iconfont.css" />
    <script type="text/javascript" charset="utf-8">
      	mui.init();
      	mui.plusReady(function(){
      		plus.navigator.setStatusBarStyle("light")
      		plus.navigator.setStatusBarBackground("#DD524D")
      	})
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav title">
	    <h1 class="mui-title title-color"><b>微聊</b></h1>
	</header>
	<nav class="mui-bar mui-bar-tab">
	    <a class="mui-tab-item mui-active" tabindex="0">
	        <span class="mui-icon iconfont  icon-weixin"></span>
	        <span class="mui-tab-label">聊天</span>
	    </a>
	    <a class="mui-tab-item" tabindex="1">
	        <span class="mui-icon iconfont  icon-tongxunlu"></span>
	        <span class="mui-tab-label">通讯录</span>
	    </a>
	    <a class="mui-tab-item" tabindex="2">
	        <span class="mui-icon iconfont  icon-pengyouquan"></span>
	        <span class="mui-tab-label">发现</span>
	    </a>
	    <a class="mui-tab-item" tabindex="3">
	        <span class="mui-icon  mui-icon-person"></span>
	        <span class="mui-tab-label">我</span>
	    </a>
	</nav>
	
	<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			let pages = [
					{
						id:'we-cahtList.html',
						url:'we-cahtList.html'
					},
					{
						id:'we-contact.html',
						url:'we-contact.html'
					},
					{
						id:'we-discovery.html',
						url:'we-discovery.html'
					},
					{
						id:'we-me.html',
						url:'we-me.html'
					}
				]
			let weViewStyle = {
				top:"44px",
				bottom:"50px"
			}
			mui.plusReady(function(){
				//获取当前的webviws对象
				let indexWebView = plus.webview.currentWebview();
				//向当前的主页追加子页面
				pages.forEach(page => {
					let wePage = plus.webview.create(page.id,page.url);
					//隐藏对应的webview
					wePage.hide();
					//追加每一个页面到主页面
					indexWebView.append(wePage);
				})
				plus.webview.show(pages[0].id)
				
				//批量绑定tab事件，展示不同的页面
				mui(".mui-bar-tab").on("tap","a",function(){
					let index = this.getAttribute("tabindex");
					plus.webview.show(pages[index].id,"fade-in",200)
					
				})
				//隐藏其他的页面
				for (let i = 0 ; i< pages.length ; i++) {
					if(i != index){
						plus.webview.hide(pages[i].id,"fade-out",200)
					}
				}
			})
		</script>
</body>
</html>